import * as vscode from 'vscode'

/**
 * 生成调试日志的HTML和JavaScript代码
 * @param containerId 调试容器的ID，默认为'debug'
 * @param initialMessage 初始化消息
 * @returns 包含HTML和JavaScript的对象
 */
export function generateDebugLogger(containerId: string = 'debug', initialMessage: string = '调试日志启动中...') {
  const showDebug = vscode.workspace.getConfiguration('codememo').get('showDebugInfo', false)

  const debugHtml = `
    <div class="debug-container" style="display: ${showDebug ? 'block' : 'none'};">
      <div class="debug-header">
        <span class="debug-title">调试日志</span>
        <button class="debug-clear-btn" onclick="clearDebugLog()">清空</button>
      </div>
      <div class="debug" id="${containerId}">${initialMessage}</div>
    </div>
  `

  const debugStyles = `
    .debug-container {
      margin: 5px 0 15px 0;
      border: 1px solid #555;
      border-radius: 4px;
      background: #222;
    }
    .debug-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 10px;
      background: #333;
      border-bottom: 1px solid #555;
      border-radius: 4px 4px 0 0;
    }
    .debug-title {
      color: #0f0;
      font-size: 12px;
      font-weight: bold;
    }
    .debug-clear-btn {
      background: #444;
      color: #fff;
      border: 1px solid #666;
      border-radius: 3px;
      padding: 2px 8px;
      font-size: 11px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .debug-clear-btn:hover {
      background: #555;
    }
    .debug {
      background: #222;
      color: #0f0;
      padding: 10px;
      font-size: 12px;
      height: 120px;
      overflow-y: auto;
      font-family: monospace;
      line-height: 1.4;
      border-radius: 0 0 4px 4px;
    }
  `

  const debugScript = `
    const showDebug = ${showDebug};
    let debugLog = ['${initialMessage}'];
    
    function log(message) {
      if (!showDebug) return;
      debugLog.push(new Date().toLocaleTimeString() + ': ' + message);
      updateDebugDisplay();
    }
    
    function clearDebugLog() {
      if (!showDebug) return;
      debugLog = ['${initialMessage}'];
      updateDebugDisplay();
      log('日志已清空');
    }
    
    function updateDebugDisplay() {
      const debugEl = document.getElementById('${containerId}');
      if (debugEl) {
        debugEl.innerHTML = debugLog.slice(-50).join('<br>');
        // 自动滚动到底部
        debugEl.scrollTop = debugEl.scrollHeight;
      }
    }
    
    // 立即显示或隐藏调试区域
    const debugContainer = document.querySelector('.debug-container');
    if (debugContainer) {
      debugContainer.style.display = showDebug ? 'block' : 'none';
    }
    
    // 初始化显示
    if (showDebug) {
      updateDebugDisplay();
    }
  `

  return {
    showDebug,
    debugHtml,
    debugStyles,
    debugScript
  }
}

/**
 * 为WebView生成完整的调试日志功能
 * @param containerId 调试容器的ID
 * @param initialMessage 初始化消息
 * @returns 调试功能的完整代码
 */
export function createWebViewDebugger(containerId: string = 'debug', initialMessage: string = '调试日志启动中...') {
  const { showDebug, debugHtml, debugStyles, debugScript } = generateDebugLogger(containerId, initialMessage)

  const fullDebugScript = `
    ${debugScript}
    
    // 添加全局错误处理
    window.addEventListener('error', function(e) {
      log('JavaScript错误: ' + e.message + ' 在 ' + e.filename + ':' + e.lineno);
    });
    
    // 添加未处理的Promise错误
    window.addEventListener('unhandledrejection', function(e) {
      log('未处理的Promise错误: ' + e.reason);
    });
  `

  return {
    showDebug,
    debugHtml,
    debugStyles,
    debugScript: fullDebugScript
  }
}
